<template>
  <view class="page">
    <view class="top">
      <view class="background"></view>
    </view>
    <view class="user-card">
      <view class="card" @click="goProfileDetail">
        <view class="top">
          <view class="userImage">
            <image :src="userInfo.avatar_url" lazy-load></image>
          </view>
        </view>
        <view class="bottom">
          <view class="left">
            <view class="user-text">
              <text>{{ userInfo.name }}</text>
            </view>
            <view class="user-phone"> {{ userInfo.contact_info }} </view>
          </view>
          <view class="right flex-center">
			<uni-icons class="icon" type="right"></uni-icons>
          </view>
        </view>
      </view>
    </view>
    <view class="list-card">
      <view class="card">
        <view class="item item-bottom-solid" @click="myClub">
          <view class="left flex-center">
			<van-icon size="50rpx" name="friends-o" />
          </view>
          <view class="center">
            <text>我的社团</text>
          </view>
          <view class="right flex-center">
         <uni-icons class="icon" type="right"></uni-icons>
          </view>
        </view>
      </view>
	  <view class="card">
	    <view class="item item-bottom-solid" @click="myPost">
	      <view class="left flex-center">
			<van-icon name="manager-o" size="50rpx" />
	      </view>
	      <view class="center">
	        <text>我的帖子</text>
	      </view>
	      <view class="right flex-center">
	     <uni-icons class="icon" type="right"></uni-icons>
	      </view>
	    </view>
	  </view>
	  <view class="card">
	    <view class="item item-bottom-solid" @click="myHome">
	      <view class="left flex-center">
			<van-icon name="wap-home-o" size="50rpx" />
	      </view>
	      <view class="center">
	        <text>我的主页</text>
	      </view>
	      <view class="right flex-center">
	     <uni-icons class="icon" type="right"></uni-icons>
	      </view>
	    </view>
	  </view>
	  <view class="card">
	    <view class="item item-bottom-solid"  @click="myCollection">
	      <view class="left flex-center">
	      <van-icon size="50rpx" name="star-o" />
	      </view>
	      <view class="center">
	        <text>我的收藏</text>
	      </view>
	      <view class="right flex-center">
	        <uni-icons class="icon" type="right"></uni-icons>
	      </view>
	    </view>
	  </view>
<!-- 	  <view class="card">
	    <view class="item item-bottom-solid" @click="moreClubs">
	      <view class="left flex-center">
	        <van-icon size="50rpx" name="more-o" />
	      </view>
	      <view class="center">
	        <text>更多社团</text>
	      </view>
	      <view class="right flex-center">
	     <uni-icons class="icon" type="right"></uni-icons>
	      </view>
	    </view>
	  </view> -->
      <view class="card">
        <view class="item item-bottom-solid" @click="createClub">
          <view class="left flex-center">
           <van-icon size="50rpx" name="add-o" />
          </view>
          <view class="center">
            <text>创建社团</text>
          </view>
          <view class="right flex-center">
            <uni-icons class="icon" type="right"></uni-icons>
          </view>
        </view>
      </view>
	<!-- 		<view class="card">
			  <view class="item item-bottom-solid"  @click="publishPost">
			    <view class="left flex-center">
			     <van-icon size="50rpx" name="coupon-o" />
			    </view>
			    <view class="center">
			      <text>发布帖子</text>
			    </view>
			    <view class="right flex-center">
			      <uni-icons class="icon" type="right"></uni-icons>
			    </view>
			  </view>
			</view> -->
			<view v-if="userInfo.role.id >= 1" class="card">
				<view class="item" @click="publishEvnet">
				<view class="left flex-center">
					 <van-icon size="50rpx" name="fire-o" />
				</view>
				<view class="center">
					<text>创建活动</text>
				</view>
				<view class="right flex-center">
					<uni-icons class="icon" type="right"></uni-icons>
				</view>
			</view>
      </view>
    </view>
     <view class="quit flex-center" @click="loginout">
        <view class="btn flex-center">
          退出登录
        </view>
     </view>
  </view>
</template>
 
<script setup>
import { storeToRefs } from 'pinia'

import useLoginStore from '@/store/login.js'
import localCache from '@/utils/cache.js'
import { LOGIN_TOKEN } from '@/global/contants.js'
const loginStore = useLoginStore() 
const { userInfo } = storeToRefs(loginStore)



// 去修改个人信息页面
function goProfileDetail() {
	uni.navigateTo({
		url:'/pages/profile-info/profile-info'
	})
}
// 我的社团
function myClub() {
	uni.navigateTo({
		url:'/pages/my-club/my-club'
	})
}

function myHome() {
	uni.navigateTo({
		url:`/pages/my-home/my-home?user_id=${userInfo.value.user_id}`
	})
}

// 我的帖子
function myPost() {
	uni.navigateTo({
		url:'/pages/my-post/my-post'
	})
}

// 更多社团
function moreClubs() {
	uni.navigateTo({
		url:'/pages/all-club/all-club'
	})
}


// 发布帖子
function publishPost() {
	uni.navigateTo({
		url:'/pages/publish-post/publish-post'
	})
}

// 我的收藏
function myCollection() {
	uni.navigateTo({
		url:'/pages/my-favourity/my-favourity'
	})
}

// 创建活动
function publishEvnet() {
	uni.navigateTo({
		url:'/pages/publish-event/publish-event'
	})
}

// 创建社团
function createClub() {
	uni.navigateTo({
		url:`/pages/create-club/create-club`
	})
}

function loginout() {
	localCache.removeCache(LOGIN_TOKEN)
	localCache.removeCache('userInfo')
	uni.navigateTo({
		url:'/pages/login/login'
	})
}

</script>
 <style lang="less" scoped>
.top {
  height: 250rpx;
  position: relative;
  .background {
    background-color: #5199ff;
    border-bottom-left-radius: 22px;
    border-bottom-right-radius: 22px;
    position: absolute;
    height: 180rpx;
    width: 100%;
  }
}
.user-card {
  height: 170rpx;
  padding: 0 15px;
  .card {
    position: relative;
    bottom: 62px;
    height: 250rpx;
    background-color: white;
    border-radius: 5px;
    .top {
      height: 30%;
      position: relative;
      .userImage {
        position: absolute;
        bottom: 24%;
        left: 10%;
        width: 150rpx;
        height: 150rpx;
        overflow: hidden;
        border-radius: 50%;
        border: 2px solid white;
		image {
			width: 150rpx;
			height: 150rpx;
		}
      }
    }
    .bottom {
      display: flex;
      height: 70%;
      .left {
        width: 80%;
        height: 100%;
        position: relative;
        .user-text {
          width: 100%;
          font-size: 1.6em;
          padding-left: 80rpx;
          height: 50%;
        }
        .user-phone {
          color: #96a1ae;
          padding-left: 80rpx;
          height: 50%;
          width: 100%;
          font-size: 0.9em;
        }
      }
      .right {
        width: 20%;
        height: 50%;
      }
    }
  }
}
.list-card {
  padding: 0 15px;
  .card {
    border-radius: 5px;
    position: relative;
    background-color: white;
    border-radius: 5px;
    padding: 5px 30px;
    .item {
      display: flex;
      height: 120rpx;
      .left {
        width: 15%;
        image {
          width: 70rpx;
          height: 70rpx;
        }
      }
      .center {
        width: 65%;
        display: flex;
        justify-content: start;
        align-items: center;
        font-size: 1.1em;
      }
      .right {
        width: 20%;
        justify-content: flex-end;
      }
    }
  }
}
.item-bottom-solid {
  border-bottom: 1px solid #d4d6da;
}
.quit{
  height: 100rpx;
  margin-top: 50px;
  .btn{
    background-color: #4f99ff;
    border-radius: 30px;
    width: 80%;
    color: white;
    font-size: 1.2em;
    height: 100%;
  }
}
.flex-center{
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

